/**
 *
 * @param {*} element 节点
 * @param {*} type 挂载的父DOM节点
 */

function render(element, dom) {
  let node = null;
  if (typeof element !== "object") {
    node = document.createTextNode(element);
  } else {
    const { type, props, child } = element;
    node = document.createElement(type);
    Array.isArray(child)
        ? child.forEach((c) => render(c, node))
        : (node.innerText = child);
    setAttributes(node,props)
  }

  function  setAttributes(node,props){
    props &&
    Object.keys(props).forEach((prop) => {
      node[prop] = props[prop];
    });
  }

  dom.appendChild(node);
}

const elementNode = {
  type: "TEXT_EMEMENT",
  props: {
    className: ["id"],
    ...children,
  },
};

function createELement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children, // children 为一个数组
    },
  };
}

function renderV3(element, dom) {
  const { type, props } = element;
  let node =
    type === "TEXT_ELEMENT"
      ? document.createTextNode()
      : document.createElement(type);

  const isProperty = (property) => property !== "children";

  Object.keys(props)
    .filter(isProperty)
    .forEach((property) => (node[property] = props[property]));

  props["children"] && props.children.forEach((child) => render(child, node));

  dom.appendChild(node);
}
